<template>
	<basic-layout v-loading="loading">
		<template v-slot:content-main>
			<div id="workPage" class="work-page">
				<div class="work-container">
					<div class="work-groups"
						v-for="item in groupList"
						:key="item.dictValue">
						<div class="work-group-title">
							{{ item.dictLabel }}
						</div>
						<div class="work-list">
							<animate-card
								v-for="(work, index) in item.projects"
								:key="work.projectId"
								:index="index"
								:name="work.name"
								:image="work.coverUrl"
								:slug="work.projectId"
								@click="handleClickCard(work.projectId)"
							/>
						</div>
					</div>
				</div>
				<div id="detailM" class="work-detail">
					<div class="zh-section section">
						<div class="work-item">
							<strong>项目名称：</strong>
							<span>{{ workInfo.name }}</span>
						</div>
						<!-- <div class="work-item">
							<strong>项目编号：</strong>
							<span>{{ workInfo.number }}</span>
						</div> -->
						<div class="work-item">
							<strong>户型：</strong>
							<span>{{ workInfo.areaFlag }}</span>
						</div>
						<div class="work-item">
							<strong>面积：</strong>
							<span>{{ workInfo.area }} sqm.</span>
						</div>
						<div class="work-item">
							<strong>常住人口：</strong>
							<span>{{ workInfo.familyFlag }}</span>
						</div>
						<div class="work-item">
							<strong>风格：</strong>
							<span>{{ workInfo.styleFlag }}</span>
						</div>
						<div class="work-item">
							<strong>原始状态：</strong>
							<span>{{ workInfo.typeFlag }}</span>
						</div>
						<!-- <div class="work-item">
							<strong>状态：</strong>
							{{ PROGRESS[work.progress_id] ? PROGRESS[work.progress_id].zh : "" }}
						</div> -->
						<div class="work-item">
							<strong>设计时间：</strong>
							<span>{{ formatDate(workInfo.startTime) }}</span>
						</div>
						<div class="work-item">
							<strong>当前进度：</strong>
							<span>{{ workInfo.buildStatus }}</span>
						</div>
						<div class="work-item">
							<strong>竣工时间：</strong>
							<span>{{ workInfo.endTime ? formatDate(workInfo.endTime) : '' }}</span>
						</div>
<!--						<div class="work-item" v-if="workInfo.cityFlag">-->
<!--							<strong>城市：</strong>-->
<!--							<span>{{ workInfo.cityFlag }}</span>-->
<!--						</div>-->
						<!-- <div class="work-item">
							<strong>主创团队：</strong>
							<span>{{ workInfo.teamFlag }}</span>
						</div> -->
					</div>
					<div class="en-section section">
						<div class="work-item">
							<strong>Project Name：</strong>
							<span>{{ workInfo.nameEn }}</span>
						</div>
						<!-- <div class="work-item">
							<strong>Project Number：</strong>
							<span>{{ workInfo.number }}</span>
						</div> -->
						<div class="work-item">
							<strong>House Type：</strong>
							<span>{{ workInfo.areaFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Area：</strong>
							<span>{{ workInfo.area }} sqm.</span>
						</div>
						<div class="work-item">
							<strong>Family Size：</strong>
							<span>{{ workInfo.familyFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Style：</strong>
							<span>{{ workInfo.styleFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Original State：</strong>
							<span>{{ workInfo.typeFlagEn }}</span>
						</div>
						<div class="work-item">
							<strong>Design Time：</strong>
							<span>{{ formatDate(workInfo.startTime) }}</span>
						</div>
						<div class="work-item">
							<strong>Progress：</strong>
							<span>{{ workInfo.buildStatusEn }}</span>
						</div>
						<div class="work-item">
							<strong>Finish Time：</strong>
							<span>{{ workInfo.endTime ? formatDate(workInfo.endTime) : '' }}</span>
						</div>
<!--						<div class="work-item">-->
<!--							<strong>City：</strong>-->
<!--							<span>{{ workInfo.cityFlagEn }}</span>-->
<!--						</div>-->
						<!-- <div class="work-item">
							<strong>Main Creative Team：</strong>
							<span>{{ workInfo.teamFlagEn }}</span>
						</div> -->
					</div>
				</div>
				<div class="work-content" v-html="workInfo.content"></div>
			</div>
		</template>
	</basic-layout>
</template>
  
<script>
import dayjs from "dayjs";
import BasicLayoutBody from "@/components/layout/BasicLayoutBody";
import AnimateCard from "@/components/AnimateCard";
import { getProjectDetail, getListGroup } from '@/api';
import { mapGetters } from "vuex";

export default {
	components: {
		"basic-layout": BasicLayoutBody,
		AnimateCard
	},
	data() {
		return {
			loading: true,
			filterType: "format",
			slug: null,
			groupList: [],
			groupType: {
				areaFlag: 'areaGroup',
				familyFlag: 'familyGroup',
				styleFlag: 'styleGroup',
				typeFlag: 'typeGroup',
				yearFlag: 'yearGroup',
				cityFlag: 'cityGroup'
			},
			workInfo: {
				projectId: '',
				name: '',
				nameEn: '',
				number: '',
				coverUrl: '',
				keywords: '',
				description: '', // 简介
				area: '',
				startTime: '',
				endTime: '',
				sort: '',
				areaFlag: '',
				familyFlag: '',
				styleFlag: '',
				typeFlag: '',
				buildStatus: '',
				cityFlag: '',
				teamFlag: '',
				areaFlagEn: '',
				styleFlagEn: '',
				familyFlagEn: '',
				cityFlagEn: '',
				teamFlagEn: '',
				buildStatusEn: '',
				// 内容详情
				content: ``
			}
		};
	},
	watch: {
		$route: {
			handler(newVal, oldVal) {
				if(newVal.query.detail_id && newVal.query.detail_id != oldVal.query.detail_id) {
					console.log('aaa');
					this.getGroup();
					this.getWorkDetail();
				}
			},
			deep: true
		}
	},
	computed: {
		...mapGetters(['areaGroup', 'familyGroup', 'styleGroup', 'typeGroup', 'cityGroup'])
	},
	activated() {},
	deactivated() {
		console.log('ddd');
		// this.groupList = [];
	},
	created() {
		if(!this.groupList || !this.groupList.length) {
			console.log('ccc');
			this.getGroup();
			this.getWorkDetail();
		}
	},
	beforeDestroy() {
		this.$store.commit("UPDATE_WORKTITLE", "");
	},
	methods: {
		jumpTo() {
			this.$nextTick(() => {
				let target = document.getElementById('workPage');
				let parent = document.getElementById('detailM');
				// parent.scrollTop = target.offsetTop - parent.offsetTop;
				parent.scrollTo(0, target.offsetTop - parent.offsetTop);
			})
		},
		goAnchor() {
			this.$nextTick(() => {
				let anchor = document.getElementById('detailM');
				// anchor.scrollIntoView();
				console.log('anchor-', anchor.offsetTop);
				// chrome
				document.body.scrollTop = anchor.offsetTop;
				// firefox
				document.documentElement.scrollTop = anchor.offsetTop;
				// safari
				window.pageYOffset = anchor.offsetTop;
			})
		},
		formatDate(date) {
			return dayjs(date).format("YYYY");
		},
		getGroup() {
			let list = this[this.groupType[this.$route.query.cat_id]];
			if(list && list.length) {
				this.groupList = [...list];
			} else {
				getListGroup({flagType: this.$route.query.cat_id}).then((res) => {
					if(res.code == 200) {
						this.groupList = [...res.data];
					} else {
						this.$message.error(res.msg)
					}
				}).catch((err) => {
					
				});
			}
		},
		getWorkDetail() {
			this.slug = this.$route.query.detail_id;
			this.detailLoading = true;
			getProjectDetail(this.$route.query.detail_id).then((res) => {
				this.detailLoading = false;
				this.workInfo = {...res.data};
				this.goAnchor();
			}).catch((err) => {
				this.detailLoading = false;
			});
		},
		handleCheckoutWorkFilterType(value) {
			this.filterType = value;
		},
		handleClickCard(slug) {
			if (slug != this.slug) {
				this.$router.push({
					path: "/works/detail",
					query: {...this.$route.query, detail_id: slug}
				});
			}
		}
	}
};
</script>
  
<style lang="scss" scoped>
.work-page {
  padding: 20px 20px 0px 20px
}
// .work-container {
// }
.work-groups {
	margin-bottom: 15px;
	.work-group-title {
		color: #6d6d6d;
		margin-bottom: 4px;
		font-size: 14px;
		font-weight: 400;
	}
	.work-list {
		font-size: 0;
	}
}

@media (min-width: 750px) and (max-width: 1200px){
	.work-item{
		font-size: 12px;
	}
	.work-detail{
		display: flex;
		padding: 0;
	}
	.section{
		width: 50%;
	}
}
@media (max-width: 750px){
	.work-item{
		font-size: 11px;
	}
	.work-detail{
		display: flex;
		padding: 0;
	}
	.zh-section{
		width: 50%;
	}
	.en-section{
		width: 50%;
	}
}
.work-item {
	color: #322825;
	line-height: 1.5;
	strong {
		font-weight: 800;
	}
	span{
		font-weight: 800;
	}
}
.section{
	margin-top: 10px;
}

.work-content {
	padding-bottom: 0px;
	margin-top: 15px;
}

.mt-40 {
	margin-top: 40px;
}
</style>  